<!--
 * @Author: 'Chenfarry' '2925102113@qq.com'
 * @Date: 2024-07-20 09:23:01
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2024-11-11 10:24:55
 * @LastEditTime: 2024-08-03 10:26:23
 * @FilePath: \orderingApp\src\pages\home\components\menu.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="bg-box">
    <cu-card>
      <scroll-view :scroll-x="true">
        <view class="scroll-view_H">
          <view v-for="(item, index) in menuList" :key="index">
            <view class="flex-col cu-flex menu-Info" @click="goPage(item.path)">
       
              <image
                :src="`/static/images/menu${index + 1}.png`"
                style="width: 104rpx; height: 104rpx"
                mode="widthFix"
              ></image>
              <text>
                {{ item.title }}
              </text>
            </view>
          </view>
        </view>
      </scroll-view>
    </cu-card>
  </view>
</template>

<script setup lang="ts">
// import { useRouter } from 'vue-router'
// const router = useRouter()

const menuList = ref([
  { title: '下周点菜', path: '/packageOne/pages/orderingDishes/index' },
  { title: '就餐预定', path: '/packageOne/pages/reserve/index' },
  { title: '历史食谱', path: '/packageOne/pages/historicalRecipes/index' },
  { title: '就餐评议', path: '/packageOne/pages/foodReview/index' },
  { title: '伙食问卷', path: '/packageOne/pages/foodQuestionnaire/index' },
])

const goPage = (path) => {
  uni.navigateTo({ url: path })
}
</script>

<style lang="scss" scoped>
.scroll-view_H {
  display: flex;
  align-items: center;
  white-space: nowrap;
  justify-content: space-between;

  text {
    font-family:
      PingFang SC,
      PingFang SC;
    font-weight: 400;
    font-size: 23rpx;
    color: #111111;
    line-height: 38rpx;
  }
}
</style>
